<template>
	<div class="personal">
		<ul class="nav">
			<li v-for="(item,index) in navMenu" :class='{checked:navIndex == index}' @click='navJump(index)' :key='index'>{{item}}</li>
		</ul>
		<component class="content" :class='{marTop: view == "password"}' :is='view'></component>
		<notice></notice>
	</div>
</template>

<script>
import Notice from '../../components/Notice/Notice'
import Personal from './children/personal'
import Password from '../login/ForgetPass'
// import Password from './children/password'
import UserInfo from './children/userInfo'

export default {
	data(){
		return {
			navIndex:0,
			navMenu:['信息总揽','修改密码','账号信息'],
			view:'personal',
		}
	},
	methods:{
		navJump(index){
			this.navIndex = index
			if(index == 0){
				this.view = 'personal'
			}else if(index == 1){
				this.view = 'password'
			}else if(index == 2){
				this.view = 'userInfo'
			}
		}
	},
	components:{
		Personal,
		Password,
		UserInfo,
		Notice
	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/all';
.personal{@include screen;
	.nav{text-align: center;background-color: white;margin-bottom:8px;
		li{display: inline-block;line-height: 40px;color:#808080;}
		li + li{margin-left:20px;}
		li.checked{color: #e86e50;}
	}
}
.marTop{margin-top:50px;}
.content{padding-bottom: 80px;}
</style>

